<template>
	<view class="addAddress">
		<u-navbar :title="title" @leftClick="leftClick" :autoBack="true">
		</u-navbar>
		<view class="" style="height: 150rpx;"></view>

		<view class="inputBox">
			<view class="lable">
				联系人
			</view>
			<input class="inputitem" v-model="name" type="text" placeholder="请输入联系人名" />
		</view>
		<view class="inputBox">
			<view class="lable">
				手机号
			</view>
			<input class="inputitem" v-model="phone" type="number" placeholder="请输入手机号" />
		</view>
		<view class="inputBox">
			<view class="lable">
				所属地区
			</view>
			<view class="inputitem">
				<civic @change="area" :areaData="areaData"></civic>
			</view>
			<!-- <input class="inputitem" type="text" placeholder="请输入联系人名" /> -->
		</view>
		<view class="inputBox">
			<view class="lable">
				详细地址
			</view>
			<input class="inputitem" v-model="address" type="text" placeholder="请输入详细地址" />
		</view>
		<view class="defult" style="margin-top: 18rpx; margin-left: 500rpx;" @click="handleCheck">

			<view v-if="checked" class="selected" style="display: flex;">
				<image src="../../static/image/selected.png" mode="" style="width: 28rpx;height: 28rpx;"></image>
				<view class="" style="margin-left: 16rpx;">
					默认地址
				</view>
			</view>
			<view v-else class="" style="display: flex;">
				<view class="" style="width: 25rpx;height: 25rpx;border-radius: 28rpx; border: 1rpx solid #A7A7A7;">
				</view>
				<view class="" style="margin-left: 16rpx;color: #A7A7A7;">
					默认地址
				</view>
			</view>
		</view>

		<view class="btns" @click="$u.debounce(handleSave, 500)">
			保存
		</view>


	</view>
</template>

<script>
	import civic from "@/static/civics.vue"
	import {
		adduserarea,
		getuserarea
	} from "@/api/api.js"
	export default {
		components: {
			civic,
		},
		data() {
			return {
				title: "新增地址",
				checked: false,
				areaData: "",
				name: "",
				phone: "",
				address: "",
				type: false,
				addressId: "",
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			console.log("options", options)
			if (options.id) {
				this.type = true
				this.title = "编辑地址"
				this.addressId = options.id
				this.handleGetAddressDetail()
			}
		},
		onUnload() {
			console.log("77777")
			uni.removeStorageSync("addressdetail")
		},
		methods: {
			async handleGetAddressDetail() {
				this.areaData = ""
				this.address = ""
				let res = await getuserarea({
					id: this.addressId
				})
				console.log("地址详情", res)
				this.name = res.data.name
				this.phone = res.data.phone
				this.checked = res.data.type == "0" ? true : false
				this.areaData = res.data.address.split('.')[0] + '/' + res.data.address.split('.')[1] + '/' + res.data
					.address.split('.')[2]
				this.address = res.data.address.split('.')[3]
				console.log("0000", this.address)
			},
			async handleSave() {
				let data = {
					name: this.name,
					phone: this.phone,
					type: this.checked ? "0" : "1",
					address: this.areaData + '.' + this.address
				}
				if (this.type) {
					data.id = this.addressId
				}
				console.log("地址", data)
				let res = await adduserarea(data)
				if (res.code == 1000) {
					uni.showToast({
						title: '添加成功',
						icon: "none",
						duration: 1500
					});
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/subsell/address"
						})
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}
			},

			area(e) {
				this.areaData = e[0].name + "." + e[1].name + "." + e[2].name
				console.log("e", this.areaData)
			},

			handleCheck() {
				this.checked = !this.checked
			},
			leftClick() {

			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 600rpx;
		height: 314rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.top {
			.title {
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 33rpx;
				text-align: center;
			}

			.text {
				margin-top: 20rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
				text-align: center;
			}
		}

		.heng {
			width: 560rpx;
			height: 2rpx;
			opacity: 1;
			background-color: #F7F8FA;
			margin: 40rpx 0;
		}

		.bottom {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 38rpx;
			width: 100%;
			text-align: center;
		}

		.removetop {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		.removeBottom {
			display: flex;

			.item {
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}

	.defult {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #359691;
		line-height: 28rpx;
		align-items: center;
	}

	page {
		width: 100%;
		min-height: 100%;
		background-color: #ffffff;
	}

	.addAddress {
		padding: 30rpx;
		box-sizing: border-box;

		.inputBox {
			margin-top: 24rpx;

			.lable {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
			}

			.inputitem {
				width: 690rpx;
				height: 88rpx;
				background: #F1F1F1;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				text-indent: 30rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				line-height: 88rpx;
				margin-top: 24rpx;
			}
		}

		.btns {
			width: 638rpx;
			height: 72rpx;
			background: #04767C;
			border-radius: 276rpx 276rpx 276rpx 276rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 290rpx;
		}
	}
</style>